<template>
    <div v-if="visible" class="overlay">
        <div class="dialog">
            <h3 class="dialog-title">请选择用于实体标注的模型</h3>
            <div class="custom-select">
                <div class="selected" @click="toggleDropdown">
                    <span v-if="selectedModelName">{{ selectedModelName }}</span>
                    <span v-else>请选择模型</span>
                    <span class="arrow">▼</span>
                </div>
                <div v-if="dropdownOpen" class="options">
                    <div v-for="model in models" :key="model.id" class="option" @click="selectModel(model)">
                        <img :src="require(`@/assets/Picture/DocumentManagement/${model.image}`)" alt=""
                            class="model-icon" />
                        {{ model.name }}
                    </div>
                </div>
            </div>
            <div class="dialog-buttons">
                <button @click="close">取消</button>
                <button @click="confirm">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['visible'],
    data() {
        return {
            selectedModel: null,
            selectedModelName: '',
            dropdownOpen: false,
            models: [
                { id: 1, name: '预训练模型：古汉语', image: 'book.png' },
                { id: 2, name: '预训练模型：现代汉语', image: 'book.png' }
                // 添加更多模型选项和对应的图片路径
            ]
        };
    },
    methods: {
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen;
        },
        selectModel(model) {
            this.selectedModel = model.id;
            this.selectedModelName = model.name;
            this.dropdownOpen = false;
        },
        confirm() {
            console.log('选择的模型:', this.selectedModel);
            this.$emit('close');
        },
        close() {
            this.$emit('close');
        }
    }
}
</script>

<style scoped>
.overlay {
    position: fixed;
    /* 使用固定定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* 灰色阴影 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 垂直居中 */
    z-index: 999;
    /* 确保在其他元素之上 */
}

.dialog {
    background-color: white;
    /* 背景颜色 */
    padding: 20px;
    /* 内边距 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    width: 300px;
    /* 设置宽度 */
}

.dialog-title {
    margin: 0 0 10px;
    /* 上下边距 */
    text-align: left;
    /* 左对齐 */
}

.custom-select {
    position: relative;
    margin-bottom: 10px;
    /* 下边距 */
}

.selected {
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
}

.option {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.option:hover {
    background-color: #f0f0f0;
    /* 悬停效果 */
}

.model-icon {
    width: 20px;
    /* 图标宽度 */
    height: 20px;
    /* 图标高度 */
    margin-right: 10px;
    /* 图标与文本之间的间距 */
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    /* 右对齐 */
}

.dialog-buttons button {
    margin-left: 5px;
    /* 按钮之间的间距 */
}
</style>
